<template>
  <van-collapse-item title="会议基本信息" name="baseInfo">
    <div class="card-container">
      <transition name="van-fade">
        <van-notice-bar
          v-show="showChargePhoneWarning"
          wrapable
          :scrollable="false"
          color="var(--color-primary)"
          background="var(--color-primary-light)"
          text="填写了负责人和负责人手机号之后，该手机号将用于接受会议动态信息，如会议讲者信息完善进度、会议劳务协议签署进度等。"
          mode="closeable"
          @close="toggleShowChargePhoneWarning"
        />
      </transition>

      <van-field
        v-model="params.topic"
        required
        label="会议主题"
        placeholder="请输入会议主题"
        click-right-icon=""
      />

      <van-field
        v-model="params.chargeName"
        label="负责人"
        placeholder="请输入负责人姓名"
      />

      <van-field
        v-model="params.chargePhone"
        label="负责人手机号"
        right-icon="question-o"
        type="tel"
        maxlength="11"
        placeholder="请输入负责人手机号"
        @click-right-icon="toggleShowChargePhoneWarning"
      />

      <select-date
        title="会议日期"
        required
        v-model="params.startDate"
      ></select-date>

      <select-time
        title="会议开始时间"
        placeholder="请选择会议开始时间"
        required
        v-model="params.startTime"
      ></select-time>

      <van-field readonly required label="会议形式">
        <template #input>
          <van-radio-group v-model="params.shape">
            <van-space wrap :size="['20px', '8px']">
              <van-radio
                v-for="item in getMapFormat('meetingType')"
                :key="item.value"
                :name="item.value"
              >{{ item.label }}</van-radio>
            </van-space>
          </van-radio-group>
        </template>
      </van-field>
    </div>
  </van-collapse-item>
</template>

<script setup>
  import { reactive, watch, ref } from 'vue'
  import useConstant from '@/hooks/useConstant';
  const { getMapFormat } = useConstant();


  const emits = defineEmits(['updateShape', 'update'])
  const showChargePhoneWarning = ref(false);
  const params = reactive({
    topic: '',
    startDate: '',
    startTime: '',
    shape: '1',
    chargePhone: '',
    chargeName: ''
  })
  
  watch(() => params.shape, () => emits('updateShape'))
  watch(params, () => emits('update'), { deep: true })

  function toggleShowChargePhoneWarning () {
    showChargePhoneWarning.value = !showChargePhoneWarning.value
  }
  defineExpose({
    getParams: () => ({
      topic: params.topic,
      shape: params.shape,
      startTime: `${params.startDate} ${params.startTime}`,
      chargePhone: params.chargePhone,
      chargeName: params.chargeName,
    }),
    setParams (detail) {
      params.topic = detail.topic;
      params.shape = detail.shape + '' || '1';

      params.chargePhone = detail.chargePhone || '';
      params.chargeName = detail.chargeName || '';
      const startTime = detail.startTime.split(' ')
      params.startDate = startTime[0];
      params.startTime = startTime[1];

      console.log(params)
    }
  })
</script>
